<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旺盛的前端组件库</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap&text=homeblgwrkaut" rel="stylesheet">

</head>
<style>
    html,body{
        height: 100%;
        overflow: hidden;
    }
    :root{
        font-size: 2vm;
        font-family: Itim,sans-serif;
    }
    body{
        display: grid;
        place-content: center;
        background-color: #025;
    }
    nav{
        position: relative;
        color: #aef;
    }
    ul{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    li{
        padding: 0 1.25rem;
    }
    svg{
        color: #ff2;
        overflow: visible;
    }
    path{
        --factor:1;
        transition: all calc(0.4s*var(--factor)) ease-in-out;
    }
    a{
        display: block;
        width: 100%;
        text-align: center;
        text-decoration: none;
        text-transform: lowercase;
        letter-spacing: 0.05em;
        font-size: 2.75rem;
        line-height: 1.25;
        color: inherit;
        transition: color 0.3s ease-in-out;
    }
    a.active{
        color: #ff2;
    }
</style>
<body>
    <nav>
        <ul>
            <li><a  class="active" href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
        </ul>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 977.2 18.2">
            <path class="squiggle" fill="none" stroke="currentColor" stroke-dashoffset="1" stroke-miterlimit="10" stroke-linecap="round" stroke-width="4" d="M.8 5.6a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.1 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.4 0l6.1-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.1 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0" />
        </svg>
    </nav>
</body>
<script>
    let oldIdex = 0;
    updateDesh(0);
    function updateDesh(index) {
        const squiggle  =document.querySelector('.squiggle')
        // 获取总长度
        const pathLength = squiggle.getTotalLength();
        console.log(pathLength);
        // 定义显示开始点
        const start = pathLength*0.25*index;
        // 定义显示结束点
        const end = pathLength*0.25*(index+1);
        squiggle.style.setProperty('--factor',Math.abs(oldIdex - index));
        oldIdex = index;
        squiggle.setAttribute(
            "stroke-dasharray",
            `1, ${start}, ${end - start}, ${pathLength}`
            );
        
        }
        const links = document.querySelectorAll('a');
        links.forEach((link,i)=>{
            link.addEventListener('click',()=>{
                links.forEach((l) => l.classList.remove('active'));
                link.classList.add('active');
                updateDesh(i);
            });
        });
    

</script>
</html>